import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image,Picker,Checkbox} from '@tarojs/components'
import './choosepatient.css'
import { AtCheckbox, AtButton, AtIcon, AtSearchBar, AtDrawer, AtTag } from 'taro-ui'
// import reactMixin from 'react-mixin';
// import myJs from './choosepatientJs.js'
import app from '../../../../main.js'
import Index from '../../index';

export default class ChoosePatient extends Component {

    config = {
        navigationBarTitleText: '选择患者'
    }
    constructor() {
        super(...arguments);
        this.state = {
            // 分段
            // current:3,
            buttonClass1: { current: 3, selected: false, dispaly: 'buttonNone' },
            buttonClass2: { current: 3, selected: false, dispaly: 'buttonNone' },
            // 搜素框
            value: '',
            // 患者信息
            patientInfo: [],
            // 患者数量
            patientCount: 0,
            // 医生所管理的表签
            labels: [],
            drawerOpen: false,
            // 选择器
            region: [],
            pickerColock: false,
            // 省市参数
            province: '',
            city: '',
            label: ''
        }
    }

    // 底部添加按钮
    selecteds(){
        // if(this.checkedItemLists.length == 0){
        //     app.toast('请选择患者')
        // }else{
            let item = JSON.stringify(this.checkedItemLists)
            // console.log('this.checkedItemLists',this.checkedItemLists)
            let label_name = this.$router.params.label_name
            let label_id = this.$router.params.id
            app.back_index += 2;
            console.log(app.back_index,label_id)
            // let back_index = this.state.back_index
            // console.log('item2',item)
            app.navigateTo('../editlabel/editlabel'+'?label_id='+label_id+'&label_name='+label_name+'&item='+item)
        // }
    }

    // componentWillUnmount () {}

    // 复选框
    onCheckbox(checkedFl,me){
        // console.log('checkedFl',checkedFl)
        let {id,name,head_image,checked} = checkedFl
        // let checkedItem = {id,name,head_image,checked}
        let index = this.checkedC(checkedFl,this.checkedItemLists)
        // console.log(index)
        // console.log(checkedItem)
    }
    
    checkedC(content,arr){
        var i
        if(arr.length == 0){
            arr.push(content)
            content.checked = true;
            console.log('this.checkedItemLists1',this.checkedItemLists)
            return i = -1
        }else{
            for(let j = 0; j < arr.length; j++){
                if(arr[j].id == content.id){
                    console.log('有')
                    content.checked = false;
                    arr.splice(j,1)
                    // console.log(arr)
                    i = j
                    // console.log(j)
                    break
                }else{
                    if(j == arr.length -1 ){
                        console.log('没有')
                        content.checked = true
                        arr.push(content)
                        // console.log(arr)
                        i = -1
                        break
                    }
                }
            }
        }
        return i
    }

    // 搜索
    onChange(value) {
        this.setState({
            value
        })
    }
    onActionClick(value) {
        console.log(value)
        this.setState({
            patientInfo: [],
            label: '',
            province: '',
            city: '',
        }, () => {
            this.offset = 0
            this.total = 0
            this.onIcomClick()
        })
    }
    onClear() {
        let me = this
        me.setState({
            value: '',
            patientInfo: []
        }, () => {
            me.offset = 0
            me.total = 0
            me.getData()
        })
    }
    // 分短器
    buttonClick(index) {
        console.log('buttonClick')
        let buttonClass = { current: 3, selected: false, dispaly: 'buttonNone' }
        switch (index) {
            case 0:
                let bol = !this.state.buttonClass1.selected
                if (bol) {
                    this.setState({
                        buttonClass2: buttonClass,
                        buttonClass1: { current: index, selected: true, dispaly: 'buttonShow' }
                    })
                } else {
                    this.setState({
                        pickerColock: false
                    })
                    this.onIcomClick()
                }
                break;
            case 1:
                let bol2 = !this.state.buttonClass2.selected
                if (bol2) {
                    this.setState({
                        buttonClass1: buttonClass,
                        buttonClass2: { current: index, selected: true, dispaly: 'buttonShow' },
                        drawerOpen: true,
                    })
                } else {
                    this.setState({
                        drawerOpen: false,
                    })
                    this.onIcomClick()
                }
                break;
        }
    }
    onIcomClick() {
        console.log('onIcomClick')
        this.setState({
            buttonClass1: { current: 3, selected: false, dispaly: 'buttonNone' },
            buttonClass2: { current: 3, selected: false, dispaly: 'buttonNone' },
            patientInfo: [],
            province: '',
            city: '',
            label: '',
        }, () => {
            this.offset = 0
            this.total = 0
            this.getData()
        })
    }
    // 抽屉
    drawerClick(itemIndex) {
        console.log(itemIndex)
        console.log(this.state.drawerOpen)
        if (itemIndex >= 0) {
            this.setState({
                label: this.state.labels[itemIndex].name
            })
        }
    }
    drawerClose(label) {
        console.log(label)
        if (label == null || label == undefined || label == '') {
            this.setState({
                buttonClass1: { current: 3, selected: false, dispaly: 'buttonNone' },
                buttonClass2: { current: 3, selected: false, dispaly: 'buttonNone' },
                patientInfo: [],
                province: '',
                city: '',
                label: '',
                drawerOpen: false,
                pickerColock: false,
            }, () => {
                console.log(this.state.drawerOpen)
                this.offset = 0
                this.total = 0
                this.getData()
            })
        } else {
            this.setState({
                patientInfo: [],
                province: '',
                city: '',
                label: label,
                drawerOpen: false,
                pickerColock: false,
            }, () => {
                console.log()
                console.log(this.state.drawerOpen)
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }
    }
    // 选择器
    regionChange(e) {
        // console.log(e.detail)
        let region = e.detail.value
        if (region !== Number) {
            this.setState({
                region: region
            }, () => {
                this.pickerCancel(region)
            })
        } else {
            this.setState({
                region: []
            }, () => {
                this.pickerCancel(region)
            })
        }
    }
    pickerCancel(region) {
        // console.log(region)
        // console.log(typeof (region))
        if (region == null || region == undefined || region.length == 0 || region === Number) {
            this.setState({
                buttonClass1: { current: 3, selected: false, dispaly: 'buttonNone' },
                buttonClass2: { current: 3, selected: false, dispaly: 'buttonNone' },
                patientInfo: [],
                province: '',
                city: '',
                label: '',
                region: [],
            }, () => {
                this.offset = 0
                this.total = 0
                this.getData()
            })
        } else {
            this.setState({
                province: region[0] || '',
                city: region[1] || '',
                patientInfo: [],
                value: '',
                label: '',
                pickerColock: true,
            }, () => {
                this.offset = 0
                this.total = 0
                this.getData()
            })
        }

    }



    offset = 0
    checkedItemLists = []
    length = 20
    total = 0
    onReachBottom() {
        if (this.offset + this.length < this.total) {
            this.offset = this.offset + this.length
            this.getData()
        } else {
            app.toast('没有更多数据咯')
        }
    }

    // 患者列表
    getData() {
        let me = this
        let data = { offset: this.offset, length: this.length, keyword: this.state.value, province: this.state.province, city: this.state.city, label: this.state.label }
        let dataArray = []
        app.get('web/patient/many', data, (res) => {
            dataArray = me.state.patientInfo.concat(res.data.result.list)
            let items = this.$router.params.items;
            if(items == 0){
                for(let i = 0; i < dataArray.length; i++){
                    dataArray[i].checked = false;
                }
            }else{
                for(let i = 0; i < dataArray.length; i++){
                     dataArray[i].checked = false;
                     JSON.parse(items).forEach((data)=>{
                        if(dataArray[i].id == data.id){
                             dataArray[i].checked = data.checked;
                             me.checkedItemLists.push(dataArray[i]);
                        }
                     })
                }
            }
            me.total = res.data.result.total
            me.setState({
                patientInfo: dataArray
            })
        })

    }
    // 总人数
    getData2() {
        let me = this
        let data = {}
        app.get('web/statistics/patients', data, (res) => {
            me.setState({
                patientCount: res.data.result.count
            })
        })
    }
    // 标签
    getData3() {
        let me = this
        let data = {}
        app.get('web/patientlabel/many', data, (res) => {
            me.setState({
                labels: res.data.result.list
            })
        })
    }
    componentDidMount() {
        this.getData()
        this.getData2()
        this.getData3()
    }


    render() {
        let patientInfos = this.state.patientInfo

        // 患者数据
        let patientlists = this.state.patientInfo.map((item,index) => {
            return <View className='patient' key={index}>
                <View className='checkeds'>
                    <Checkbox
                       value={item.id}
                       onClick={this.onCheckbox.bind(this,item)}
                       checked = {item.checked}/>
                </View>
                <Image
                    className='head'
                    src={item.head_image}
                />
                <View className='info'>
                    <View className='top'>
                        {item.name}
                        <Text className='more-info'>{item.gender} {item.age}岁</Text>
                        <Text className='more-info'>添加于{item.created_at}</Text>
                    </View>
                    <View className='bottom'>
                        {item.labels.map((tagItem,index) => {
                            return <AtTag className='tag' key={index}>{tagItem}</AtTag>
                        })}
                    </View>
                </View>
            </View>
        })
        // 地区赛选
        let AtIcon1 = this.state.buttonClass1.selected ? <AtIcon value='close-circle' size='15' onClick={this.onIcomClick}></AtIcon> : null
        let AtIcon2 = this.state.buttonClass2.selected ? <AtIcon value='close-circle' size='15' onClick={this.onIcomClick}></AtIcon> : null
        // 标签赛选
        let labelList = this.state.labels.map((item2) => {
            return item2.name
        })

        return (
            <View className='patient-list'>
                <AtSearchBar
                    showActionButton
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                    onClear={this.onClear.bind(this)}
                    onActionClick={this.onActionClick.bind(this, this.state.value)}
                    actionName='搜索'
                />
                <View className='patients-num'>全部患者（{this.state.patientCount}人）</View>
                <View className='segmentControl'>
                    <Picker mode='region' onChange={this.regionChange.bind(this)} onCancel={this.pickerCancel.bind(this, 0)} disabled={this.state.pickerColock}>
                        <AtButton className={this.state.buttonClass1.dispaly} onClick={this.buttonClick.bind(this, 0)}>
                            地区筛选  {AtIcon1}
                        </AtButton>
                    </Picker>
                    <AtButton className={this.state.buttonClass2.dispaly} onClick={this.buttonClick.bind(this, 1)}>
                        标签筛选  {AtIcon2}
                    </AtButton>
                </View>
                <AtDrawer
                    show={this.state.drawerOpen}
                    right
                    mask
                    items={labelList}
                    onClose={this.drawerClose.bind(this, this.state.label)}
                    onItemClick={this.drawerClick.bind(this)}
                />
                <View className='list'>
                    <View className='alphabet'>
                        <Text className='text'>#</Text>
                        <Text className='text'>A</Text>
                        <Text className='text'>B</Text>
                        <Text className='text'>C</Text>
                        <Text className='text'>D</Text>
                        <Text className='text'>E</Text>
                        <Text className='text'>F</Text>
                        <Text className='text'>G</Text>
                        <Text className='text'>H</Text>
                        <Text className='text'>I</Text>
                        <Text className='text'>J</Text>
                        <Text className='text'>K</Text>
                        <Text className='text'>L</Text>
                        <Text className='text'>M</Text>
                        <Text className='text'>N</Text>
                        <Text className='text'>O</Text>
                        <Text className='text'>P</Text>
                        <Text className='text'>Q</Text>
                        <Text className='text'>R</Text>
                        <Text className='text'>S</Text>
                        <Text className='text'>T</Text>
                        <Text className='text'>U</Text>
                        <Text className='text'>V</Text>
                        <Text className='text'>W</Text>
                        <Text className='text'>X</Text>
                        <Text className='text'>Y</Text>
                        <Text className='text'>Z</Text>
                    </View>
                    {patientlists}
                </View>
                <View className='btn'>
                        <AtButton 
                        type='primary' 
                        size='normal' 
                        className='btn-son' 
                        onClick={()=>{this.selecteds()}}
                        >
                            确定选择患者
                        </AtButton>
                    </View>
            </View>
        );
    }
}

